import React, { Component, Suspense } from 'react';

const Child = React.lazy(() => import('./Child'));

class App extends Component {
    state = {
        show: false
    }

    handleClick = () => {
        this.setState((state) => ({
            show: !state.show
        }));
    }

    render () {
        return (
            <div>
                <div>
                    <button onClick={this.handleClick}>{this.state.show ? 'hide' : 'show'}</button>
                </div>
                <Suspense fallback={<div>loading...</div>}>
                    {
                        this.state.show && <Child />
                    }
                </Suspense>
            </div>
        );
    }
}

export default App;
